<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./jquery-1.11.0.js"></script>
    <title></title>
</head>
<body>
<textarea name="" id="" cols="50" rows="10">
    event.stopPropagation  w3c标准写法
    event.cancelBubble = true ie写法
    event.stopImmediatePropagation jquery扩展能力代表不仅仅阻止冒泡 而且阻止当前节点上挂的其他后续事件不执行


</textarea>

<div class="event">click me test event stoppropagation(watch console)</div>


<select name="testEvent" id="testEvent">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>
<script type="text/javascript">
    /**
     *  e.stopImmediatePropagation()
     *  e.stopPropagation();
     */
    $('.event').on('click',function(e){
        console.log('first click');
        //e.stopImmediatePropagation();
        e.stopPropagation();
    });
    $('.event').on('click',function(){
        console.log('second click');
    });

    /**
     * test select click
     */
    $('#testEvent').on('click.te',function(){
        console.log('select click');
    });





</script>

</body>
</html>